<template>
  <view class="pb-30">
  <!--  <uv-navbar bgColor="transparent" title="产品详情" left-icon-color="#ffffff">
      <view slot="left">
        <nav-left></nav-left>
      </view>
    </uv-navbar> -->

    <view class="banner-wrap">
      <uv-swiper radius="0" height="750rpx" indicatorStyle="right: 10rpx" autoplay :list="bannerList" keyName="image"></uv-swiper>
    </view>

    <view class="goods-name bg-f radius-10 mg-20 fs-30 fw-700">{{data.productName}}</view>

    <view class="bg-f radius-10 mx-20">
      <view class="introduce">产品介绍</view>

      <view-content :content="data.content"></view-content>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
       {image:""}
      ],
	  id:"",
	  data:{}
    }
  },
   onLoad(o) {
    this.id = o.id
	this.getData()
	
  },
  methods: {
	  async getData(){
		  const result = await this.$api.postProductInfo({ id: this.id })
		  if(result){
			  console.log(result)
			  this.data = result.data
			  this.bannerList[0].image = result.data.productImage
		  }
	  }
  },
}
</script>

<style lang="scss" scoped>
.banner-wrap {
  width: 750rpx;
  height: 750rpx;
}
.goods-name {
  padding: 36rpx 30rpx;
}

// 产品介绍
.introduce {
  font-weight: 500;
  font-size: 26rpx;
  color: #888;
  padding: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before,
  &::after {
    content: '';
    width: 90rpx;
    height: 2rpx;
    background: #e5e5e5;
    margin: 0 15rpx;
  }
}
</style>
